<template>
  <div class="hotelInfo">
    <h3 class="title">酒店信息</h3>
    <div class="content">
      <!-- 基本信息 -->
      <el-row class="info-row">
        <el-col :span="3"
          ><i class="el-icon-document">
            <span class="font">基本信息</span>
          </i></el-col
        >
        <el-col :span="21">
          <ul class="hotelfont">
            <li>{{ data.creation_time }}</li>
            <li>|</li>
            <li>{{ data.renovat_time }}</li>
            <li>|</li>
            <li>共{{ data.roomCount }}间客房</li>
            <li>|</li>
            <li>酒店{{ data.phone }}</li>
            <li>|</li>
            <li>同程预订电话 95711</li>
          </ul>
        </el-col>
      </el-row>
      <!-- 酒店设施 -->
      <el-row class="info-row">
        <el-col :span="3"
          ><i class="el-icon-s-claim">
            <span class="font">酒店设施</span>
          </i></el-col
        >
        <el-col :span="21" class="facility">
          <div v-for="(item, index) in data.hotelassets" :key="index">
            <i class="el-icon-check"></i>
            {{ item.name }}
          </div>
        </el-col>
      </el-row>
      <!-- 酒店政策 -->
      <el-row class="info-row">
        <el-col :span="3"
          ><i class="el-icon-document-copy">
            <span class="font">酒店政策</span>
          </i></el-col
        >
        <el-col :span="21">{{ data.breadcrumb }}</el-col>
      </el-row>
      <!-- 酒店简介 -->
      <el-row class="info-row">
        <el-col :span="3"
          ><i class="el-icon-edit">
            <span class="font">酒店简介</span>
          </i></el-col
        >
        <el-col :span="21">{{ data.breadcrumb }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  mounted() {},
};
</script>

<style lang="less" scoped>
.hotelInfo {
  .content {
    margin-left: 15px;
  }
  .title {
    margin-bottom: 10px;
  }
  .info-row {
    padding: 20px 0;
    margin-right: 200px;
    border-bottom: 1px dashed #ccc;
    font-size: 12px;
    .font {
      margin-left: 8px;
    }
    .hotelfont,
    .facility {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > li {
        padding-right: 24px;
        &:nth-child(2n) {
          color: #ccc;
        }
      }
    }
    .facility {
      > div {
        margin-right: 25px;
        .el-icon-check {
          color: green;
          font-weight: 700;
        }
      }
    }
  }
}
</style>